<script setup>
import { Calendar, Location, Sunny, UserFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { formatDateOnly, formatTimeOnly, getWeekday } from '@/utils/times'

let myr = ref()
let sfm = ref()
let xqj = ref()
function updateClock() {
  const now = new Date()
  myr.value = formatDateOnly(now)
  sfm.value = formatTimeOnly(now)
  xqj.value = getWeekday(now)

}
updateClock()
setInterval(updateClock, 1000)

</script>

<template>
  <div id="gardenhead">
    <!-- 标题（由于没有该字体，此处采用图片代替） -->
    <div class="headtext"></div>
  </div>

  <div class="headtime">
    <span>
      <el-icon>
        <Calendar />
      </el-icon>
    </span>
    <span>{{ myr }}</span>
    <span>{{ xqj }}</span>
    <span>{{ sfm }}</span>
  </div>

  <div class="headuser">
    <div>
      <el-icon>
        <Location />
      </el-icon>
      <span>地点名称</span>
    </div>

    <div>
      <el-icon>
        <Sunny />
      </el-icon>
      <span>晴</span>
      <span>14℃</span>
    </div>

    <div>
      <el-icon>
        <UserFilled />
      </el-icon>
      <span>管理员</span>
    </div>

    <div>
      <span>退出</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#gardenhead {
  position: absolute;
  width: 100vw;
  height: vh(81px);
  background: url('../../assets/img/head.png') no-repeat center/contain;
  z-index: 1;
  color: #fff;
  font-size: vw(18px);
  display: flex;
  justify-content: center;
  align-items: center;

  .headtext {
    width: vw(367px);
    height: vh(48px);
    background: url('../../assets/img/headtext.png') no-repeat center/contain;
  }
}

.headtime {
  position: absolute;
  top: vh(50px);
  left: vw(30px);
  width: vw(275px);
  height: vh(18px);
  color: #fff;
  z-index: 1;
  font-size: vw(18px);
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {

    &:nth-of-type(2) {
      color: #49a3ff;
    }

    &:nth-of-type(4) {
      color: #49a3ff;
    }
  }
}

.headuser {
  position: absolute;
  top: vh(50px);
  right: vw(29px);
  width: vw(415px);
  height: vh(24px);
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  div {
    display: inline-block;
    font-size: vw(18px);
    color: #fff;

    &:nth-child(1) span {
      margin-left: vw(10px);
    }

    &:nth-child(2) {
      margin: 0 vw(40px);
    }

    &:nth-child(2) span {
      &:nth-of-type(1) {
        margin: 0 vw(12px);
      }

      &:nth-of-type(2) {
        color: #49a3ff;
      }
    }

    &:nth-child(3) span {
      margin-left: vw(12px);
      color: #49a3ff;
    }

    &:nth-child(4) span {
      margin-left: vw(20px);
      font-size: vw(14px);
    }
  }
}
</style>